<template>
    <view style="width: 100%;height: 100%;">
        <map class="map" :longitude="longitude" :latitude="latitude" enable-poi enable-building @click="mapClick" :markers="markers"></map>
       
            <scroll-view class="scroll" scroll-y>
                <view 
                v-for="item,index in list"
                :key="index">
                    <view class="item" v-if="ContactList.indexOf(item.business.tel)==-1">
                        <view style="margin-bottom: 10rpx;">店名：{{ item.name }}</view>
                        <view class="save" v-if="ContactList.indexOf(item.business.tel)!=-1">已保存</view>
                        <view style="margin-bottom: 10rpx;">地址：{{ item.address }}</view>
                        <view style="display: flex;justify-content: flex-end;color: rgb(88, 89, 97);">
                          {{ item.business.tel }}
                          <view @click="call(item.business.tel)" class="call">拨打电话</view>
                          <view @click="contact(item)" class="contact">存入联系人</view>
                        </view>
                    </view>
                </view>
        </scroll-view>
        
    </view>
</template>

<script>
export default {
    name: 'AddPowderEveryDayMainMap',

    data() {
        return {
            latitude:0,
            longitude:0,
            markers:[],
            list:[],
            ContactList:[],
            num:1,
            location:''
        };
    },

    mounted() {
     this.getMap()
    },

    methods: {
        async getMap(){
            uni.getLocation({
                type: 'gcj02',
                success: async({ longitude, latitude }) => {
                  this.latitude = latitude
                  this.longitude = longitude
                  this.location = `${latitude},${longitude}`
                  this.markers = [{
                    id: 0,
                    latitude: latitude,
                    longitude: longitude,
                    iconPath: '../static/map.png'
                  }]
                  this.getPOI()
                }
        })
        },
        mapClick(e){
            console.log(e);
            this.location = `${e.detail.latitude},${e.detail.longitude}`
            this.markers = [{
                    id: 0,
                    latitude: e.detail.latitude,
                    longitude: e.detail.longitude,
                    iconPath: '../static/map.png'
                  }]
                  this.getPOI()
        },
        async getPOI(e){
            const res = await uni.request({
        url: `https://restapi.amap.com/v5/place/around?key=3b302662f1028ff0a78c5950da3fb3fc&location=${this.location}&radius=10000&show_fields=business&page_size=25&page_num=${this.num}`,
        // url: `https://restapi.amap.com/v5/place/around?key=3b302662f1028ff0a78c5950da3fb3fc&location=116.473168,39.993015&radius=10000&types=011100`,
        method: 'GET'
      })
      console.log(res);
      let poiArr = res.data.pois.filter(e=>{
        return e.business.tel
      })
      poiArr.forEach((e,i) => {
        let reg = /^1[3-9]\d{9}$/
        let str = e.business.tel.split(';')
        let str1 = str.filter(e => reg.test(e))
        if(!str1.length){
          poiArr.splice(i,1)
        }else{
          console.log(str1);
          e.business.tel = str1[0]
        }
      });
      let phone = /^1[3-9]\d{9}$/
      console.log(poiArr);
      this.list = poiArr.filter(e=>phone.test(e.business.tel))
      console.log(this.list);
      let Oo = 0
      this.list.forEach(e=>{
        if(this.ContactList.indexOf(e.business.tel)!=-1){
          Oo++
        }
      })
      console.log(Oo);
      if(this.list.length-Oo<=5){
        this.getPOI()
      }
        }
    },
};
</script>

<style lang="scss" scoped>
.map{
    width: 100%;
    height: 700rpx;

}
.scroll{
    width: 100%;
    height: 500rpx;
    .item{
      position: relative;
      font-size: 26rpx;
      padding: 30rpx;
      box-sizing: border-box;
      background-color: rgb(249,249,249);
      // background-color: pink;
      border-radius: 60rpx;
      margin-bottom: 30rpx;
      .save{
        position: absolute;
        top: 20rpx;
        right: 30rpx;
        color:rgb(244, 82, 82);
      }
      .call{
        width: 110rpx;
        height: 40rpx;
        margin: 0 20rpx;
        background-color: rgb(7, 150, 193);
        color: #fff;
        padding: 0 6rpx;
        line-height: 40rpx;
        text-align: center;
        font-size: 24rpx;
        border-radius: 18rpx;
      }
      .contact{
        width: 130rpx;
        height: 40rpx;
        margin: 0 20rpx;
        background-color: rgb(7, 150, 193);
        color: #fff;
        padding: 0 6rpx;
        line-height: 40rpx;
        text-align: center;
        font-size: 24rpx;
        border-radius: 18rpx;
        margin: 0;
      }
    }
}
</style>